/**
 * Created by kobe on 16/08/10
 */

import PullRefresh from '../components/mui/PullRefresh.js';
import NoData from '../components/NoData.js';

const lf = liefeng,
    R = React,
    RC = React.createClass,
    ajax = lf.utils.ajax,
    translateTime = lf.utils.format;

const Root = RC({
    getInitialState: function () {
        return ({
            list: [],
            noData: false,
        })

    },
    getList: function (user, page, shouldAppend) {

        if (!page) page = 1;

        let me = this;

        ajax({

            type: 'GET',
            data: {
                staffId: user.id,
                page: page,
                pageSize: 20
            },
            success: function (data) {
                //成功
                if (data.code == '200') {
                    me.setList(data, shouldAppend);
                }
                else {
                    alert(data.desc);
                }
            }
        }, lf.api.attendance.list);

    },
    setList(data, shouldAppend){
        let me = this;
        if (data.dataList.length == 0) {
            me.setState({noData: true})
        }

        let resultList = data.dataList,
            maxCount = data.maxCount,
            appendedList;

        if (shouldAppend) {
            appendedList = me.state.list
            $.each(resultList, function (i, item) {
                appendedList.push(item);
            });

            mui('#pullrefresh')
                .pullRefresh()
                .endPullupToRefresh((appendedList.length == maxCount)); //refresh completed

            me.setState({
                list: appendedList,
            });

        }
        else {
            me.setState({
                list: resultList,
            });
        }
    },
    componentWillMount: function () {
        let me = this,
            user = me.props.user;
        me.getList(user)
    },
    render: function () {
        var list = this.state.noData ? <NoData data={{'span_text': '暂无打卡记录'}}/> :
            this.state.list.map((data) => {
                return (
                    <div>打卡时间: {translateTime(data.recordTime)}</div>
                )
            })

        return (
            <div className="clock-history">
                <div className="history-list">{list}</div>
            </div>
        )
    },
    componentWillReceiveProps: function (nextProps) {
        let page = nextProps.page,
            user = nextProps.user;
        this.getList(user, page, true)
    }
});

const PullRefreshCon = React.createClass({
    getInitialState: function () {
        return {
            page: 1,
        }
    },
    pullupFn: function () {
        let newPage = ++this.state.page;
        this.setState({page: newPage});
    },
    render: function () {
        let me = this;
        return <PullRefresh pullupFn={me.pullupFn} data={<Root page={me.state.page} user={me.props.user}/>}/>;
    }
})

lf.appJs.getUser(function (user) {
    R.render(<PullRefreshCon user={user}/>, document.getElementById('root'), function () {
        $('#root').css('background', 'none');
    });
});
